{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import {Highlights, Hero} from '@react-spectrum/docs';
import heroNarrow from 'url:../assets/ReactSpectrum_Mobile_976x1025_1x.png';
import heroNarrow2x from 'url:../assets/ReactSpectrum_Mobile_976x1025_2x.png';
import heroNarrowWebp from 'url:../assets/ReactSpectrum_Mobile_976x1025_1x.webp';
import heroNarrow2xWebp from 'url:../assets/ReactSpectrum_Mobile_976x1025_2x.webp';
import heroWide from 'url:../assets/ReactSpectrum_976x445_1x.png';
import heroWide2x from 'url:../assets/ReactSpectrum_976x445_2x.png';
import heroWideWebp from 'url:../assets/ReactSpectrum_976x445_1x.webp';
import heroWide2xWebp from 'url:../assets/ReactSpectrum_976x445_2x.webp';
import clsx from 'clsx';
import linkStyle from '@adobe/spectrum-css-temp/components/link/vars.css';
import styles from '@react-spectrum/docs/src/docs.css';
import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';

import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
import ComboBoxAnatomy from '../assets/component-illustrations/ComboBox.svg';
import SelectAnatomy from '../assets/component-illustrations/Picker.svg';
import Button from '../assets/component-illustrations/Button.svg';
import ToggleButton from '../assets/component-illustrations/ToggleButton.svg';
import ActionButton from '../assets/component-illustrations/ActionButton.svg';
import ActionGroup from '../assets/component-illustrations/ActionGroup.svg';
import ButtonGroup from '../assets/component-illustrations/ButtonGroup.svg';
import Checkbox from '../assets/component-illustrations/Checkbox.svg';
import CheckboxGroup from '../assets/component-illustrations/CheckboxGroup.svg';
import RadioGroup from '../assets/component-illustrations/RadioGroup.svg';
import Switch from '../assets/component-illustrations/Switch.svg';
import TextField from '../assets/component-illustrations/TextField.svg';
import TextArea from '../assets/component-illustrations/TextArea.svg';
import NumberField from '../assets/component-illustrations/NumberField.svg';
import SearchField from '../assets/component-illustrations/SearchField.svg';
import Form from '../assets/component-illustrations/Form.svg';
import Meter from '../assets/component-illustrations/Meter.svg';
import ProgressCircle from '../assets/component-illustrations/ProgressCircle.svg';
import ProgressBar from '../assets/component-illustrations/ProgressBar.svg';
import StatusLight from '../assets/component-illustrations/StatusLight.svg';
import Tabs from '../assets/component-illustrations/Tabs.svg';
import Link from '../assets/component-illustrations/Link.svg';
import Breadcrumbs from '../assets/component-illustrations/Breadcrumbs.svg';
import Slider from '../assets/component-illustrations/Slider.svg';
import RangeSlider from '../assets/component-illustrations/RangeSlider.svg';
import Dialog from '../assets/component-illustrations/Dialog.svg';
import Tooltip from '../assets/component-illustrations/Tooltip.svg';
import Popover from '../assets/component-illustrations/Popover.svg';
import ContextualHelp from '../assets/component-illustrations/ContextualHelp.svg';
import Menu from '../assets/component-illustrations/Menu.svg';
import ListBox from '../assets/component-illustrations/ListBox.svg';
import ListView from '../assets/component-illustrations/ListView.svg';
import Table from '../assets/component-illustrations/Table.svg';
import Tree from '../assets/component-illustrations/Tree.svg';
import Calendar from '../assets/component-illustrations/Calendar.svg';
import RangeCalendar from '../assets/component-illustrations/RangeCalendar.svg';
import DateField from '../assets/component-illustrations/DateField.svg';
import TimeField from '../assets/component-illustrations/TimeField.svg';
import DatePicker from '../assets/component-illustrations/DatePicker.svg';
import DateRangePicker from '../assets/component-illustrations/DateRangePicker.svg';
import LabeledValue from '../assets/component-illustrations/LabeledValue.svg';
import Badge from '../assets/component-illustrations/Badge.svg';
import TagGroup from '../assets/component-illustrations/TagGroup.svg';
import DropZone from '../assets/component-illustrations/DropZone.svg';
import FileTrigger from '../assets/component-illustrations/FileTrigger.svg'
import ColorSlider from '../assets/component-illustrations/ColorSlider.svg';
import ColorWheel from '../assets/component-illustrations/ColorWheel.svg';
import ColorArea from '../assets/component-illustrations/ColorArea.svg';
import ColorField from '../assets/component-illustrations/ColorField.svg';
import ColorSwatch from '../assets/component-illustrations/ColorSwatch.svg';
import ColorSwatchPicker from '../assets/component-illustrations/ColorSwatchPicker.svg';
import ColorPicker from '../assets/component-illustrations/ColorPicker.svg';
import Disclosure from '../assets/component-illustrations/Disclosure.svg';
import Accordion from '../assets/component-illustrations/DisclosureGroup.svg';
import Toast from '../assets/component-illustrations/Toast.svg';

---
category: Libraries
description: A React implementation of Spectrum, Adobe’s design system. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications.
---

# React Spectrum

A React implementation of Spectrum, Adobe’s design system.

<p className={clsx(typographyStyles['spectrum-Body2'], styles.homeLinks)}>
  <a href="getting-started.html" className={clsx(linkStyle['spectrum-Link'], styles.link)}>Get started</a>
  <span aria-hidden="true">•</span>
  <a href="https://github.com/adobe/react-spectrum" className={clsx(linkStyle['spectrum-Link'], styles.link)}>GitHub</a>
</p>

<Hero
  narrow={heroNarrow}
  narrow2x={heroNarrow2x}
  narrowWebp={heroNarrowWebp}
  narrow2xWebp={heroNarrow2xWebp}
  wide={heroWide}
  wide2x={heroWide2x}
  wideWebp={heroWideWebp}
  wide2xWebp={heroWide2xWebp}
  alt="React Spectrum hero image" />

<Highlights items={[
  {
    title: 'Accessible',
    description: 'React Spectrum components are designed with accessibility top-of-mind and include full screen reader and keyboard navigation support.',
  },
  {
    title: 'Adaptive',
    description: 'React Spectrum components are designed to work with mouse, touch, and keyboard interactions. They’re built with responsive design principles to deliver a great experience, no matter the device.',
  },
  {
    title: 'Color schemes',
    description: 'React Spectrum includes automatic support for dark and light mode based on operating system settings.'
  },
  {
    title: 'International',
    description: 'React Spectrum components are designed to support over 30 languages, including support for right-to-left languages, date and number formatting, and more.'
  }
]} />

## Components

### Buttons

<section className={styles.cardGroup}>

<ExampleCard
  url="Button.html"
  title="Button"
  description="A button allows a user to perform an action or to navigate to another page.">
  <Button />
</ExampleCard>

<ExampleCard
  url="ActionButton.html"
  title="ActionButton"
  description="An action button allows a user to perform an action.">
  <ActionButton />
</ExampleCard>

<ExampleCard
  url="ToggleButton.html"
  title="ToggleButton"
  description="A toggle button allows a user to toggle between two states.">
  <ToggleButton />
</ExampleCard>

<ExampleCard
  url="ButtonGroup.html"
  title="ButtonGroup"
  description="A button group is a grouping of buttons whose actions are related to each other.">
  <ButtonGroup />
</ExampleCard>

<ExampleCard
  url="ActionGroup.html"
  title="ActionGroup"
  description="An action group is a grouping of action buttons that are related to each other.">
  <ActionGroup />
</ExampleCard>

<ExampleCard
  url="FileTrigger.html"
  title="FileTrigger"
  description="A file trigger allows a user to access the file system with a Button.">
  <FileTrigger />
</ExampleCard>

</section>

### Pickers

<section className={styles.cardGroup}>

<ExampleCard
  url="ComboBox.html"
  title="ComboBox"
  description="A combobox combines a text input with a listbox, and allows a user to filter a list of options.">
  <ComboBoxAnatomy />
</ExampleCard>

<ExampleCard
  url="Picker.html"
  title="Picker"
  description="A picker displays a collapsible list of options, and allows a user to select one of them.">
  <SelectAnatomy />
</ExampleCard>

</section>

### Collections

<section className={styles.cardGroup}>

<ExampleCard
  url="Menu.html"
  title="Menu"
  description="A menu displays a list of actions or options that a user can choose.">
  <Menu />
</ExampleCard>

<ExampleCard
  url="ListBox.html"
  title="ListBox"
  description="A listbox displays a list of options, and allows a user to select one or more of them.">
  <ListBox />
</ExampleCard>

<ExampleCard
  url="ListView.html"
  title="ListView"
  description="A ListView displays a list of interactive items, with keyboard navigation, row selection, and actions.">
  <ListView />
</ExampleCard>

<ExampleCard
  url="TableView.html"
  title="TableView"
  description="A table view displays data in rows and columns, with row selection and sorting.">
  <Table />
</ExampleCard>

<ExampleCard
  url="TreeView.html"
  title="TreeView"
  description="A tree view displays hierarchical data with selection and collapsing.">
  <Tree />
</ExampleCard>

<ExampleCard
  url="TagGroup.html"
  title="TagGroup"
  description="A tag group displays a list of items, with support for keyboard navigation and removal.">
  <TagGroup />
</ExampleCard>

</section>

### Date and time

<section className={styles.cardGroup}>

<ExampleCard
  url="DatePicker.html"
  title="DatePicker"
  description="A date picker combines a DateField and a Calendar popover.">
  <DatePicker />
</ExampleCard>

<ExampleCard
  url="DateRangePicker.html"
  title="DateRangePicker"
  description="A date range picker combines two DateFields and a RangeCalendar popover.">
  <DateRangePicker />
</ExampleCard>

<ExampleCard
  url="DateField.html"
  title="DateField"
  description="A date field allows a user to enter and edit date values using a keyboard.">
  <DateField />
</ExampleCard>

<ExampleCard
  url="TimeField.html"
  title="TimeField"
  description="A time field allows a user to enter and edit time values using a keyboard.">
  <TimeField />
</ExampleCard>

<ExampleCard
  url="Calendar.html"
  title="Calendar"
  description="A calendar allows a user to select a single date from a date grid.">
  <Calendar />
</ExampleCard>

<ExampleCard
  url="RangeCalendar.html"
  title="RangeCalendar"
  description="A range calendar allows a user to select a contiguous range of dates.">
  <RangeCalendar />
</ExampleCard>

</section>

### Color

<section className={styles.cardGroup}>

<ExampleCard
  url="ColorPicker.html"
  title="ColorPicker"
  description="A color picker combines a swatch with a customizable popover for editing a color.">
  <ColorPicker />
</ExampleCard>

<ExampleCard
  url="ColorArea.html"
  title="ColorArea"
  description="A color area allows users to adjust two channels of a color value.">
  <ColorArea />
</ExampleCard>

<ExampleCard
  url="ColorSlider.html"
  title="ColorSlider"
  description="A color slider allows users to adjust an individual channel of a color value.">
  <ColorSlider />
</ExampleCard>

<ExampleCard
  url="ColorWheel.html"
  title="ColorWheel"
  description="A color wheel allows users to adjust the hue of a color value on a circular track.">
  <ColorWheel />
</ExampleCard>

<ExampleCard
  url="ColorField.html"
  title="ColorField"
  description="A color field allows users to edit a hex color or individual color channel value.">
  <ColorField />
</ExampleCard>

<ExampleCard
  url="ColorSwatch.html"
  title="ColorSwatch"
  description="A color swatch displays a preview of a selected color.">
  <ColorSwatch />
</ExampleCard>

<ExampleCard
  url="ColorSwatchPicker.html"
  title="ColorSwatchPicker"
  description="A color swatch picker displays a list of color swatches and allows a user to select one of them.">
  <ColorSwatchPicker />
</ExampleCard>

</section>

### Overlays

<section className={styles.cardGroup}>

<ExampleCard
  url="Dialog.html"
  title="Dialog"
  description="A dialog is an overlay shown above other content in an application.">
  <Dialog />
</ExampleCard>

<ExampleCard
  url="DialogTrigger.html"
  title="DialogTrigger"
  description="Displays a dialog in a popover, modal, or tray in response to a trigger.">
  <Popover />
</ExampleCard>

<ExampleCard
  url="Tooltip.html"
  title="Tooltip"
  description="A tooltip displays a description of an element on hover or focus.">
  <Tooltip />
</ExampleCard>

<ExampleCard
  url="ContextualHelp.html"
  title="ContextualHelp"
  description="Contextual help shows extra information about an adjacent component.">
  <ContextualHelp />
</ExampleCard>

</section>

### Forms

<section className={styles.cardGroup}>

<ExampleCard
  url="Checkbox.html"
  title="Checkbox"
  description="A checkbox allows a user to select an individual option.">
  <Checkbox />
</ExampleCard>

<ExampleCard
  url="CheckboxGroup.html"
  title="CheckboxGroup"
  description="A checkbox group allows a user to select one or more items in a list of options.">
  <CheckboxGroup />
</ExampleCard>

<ExampleCard
  url="RadioGroup.html"
  title="RadioGroup"
  description="A radio group allows a user to select a single item from a list of options.">
  <RadioGroup />
</ExampleCard>

<ExampleCard
  url="Switch.html"
  title="Switch"
  description="A switch allows a user to turn a setting on or off.">
  <Switch />
</ExampleCard>

<ExampleCard
  url="TextField.html"
  title="TextField"
  description="A text field allows a user to enter a plain text value with a keyboard.">
  <TextField />
</ExampleCard>

<ExampleCard
  url="TextArea.html"
  title="TextArea"
  description="A text area allows a user to enter a multi-line text value with a keyboard.">
  <TextArea />
</ExampleCard>

<ExampleCard
  url="SearchField.html"
  title="SearchField"
  description="A search field allows a user to enter and clear a search query.">
  <SearchField />
</ExampleCard>

<ExampleCard
  url="NumberField.html"
  title="NumberField"
  description="A number field allows a user to enter, increment, or decrement a numeric value.">
  <NumberField />
</ExampleCard>

<ExampleCard
  url="Form.html"
  title="Form"
  description="A form provides layout and alignment for a grouping of fields.">
  <Form />
</ExampleCard>

<ExampleCard
  url="Slider.html"
  title="Slider"
  description="A slider allows a user to select a numeric value within a range.">
  <Slider />
</ExampleCard>

<ExampleCard
  url="RangeSlider.html"
  title="RangeSlider"
  description="A range slider allows a user to select a range of values within a larger range.">
  <RangeSlider />
</ExampleCard>

</section>

### Navigation

<section className={styles.cardGroup}>

<ExampleCard
  url="Tabs.html"
  title="Tabs"
  description="Tabs organize content into multiple sections, and allow a user to view one at a time.">
  <Tabs />
</ExampleCard>

<ExampleCard
  url="Link.html"
  title="Link"
  description="A link allows a user to navigate to another page.">
  <Link />
</ExampleCard>

<ExampleCard
  url="Breadcrumbs.html"
  title="Breadcrumbs"
  description="Breadcrumbs display a hierarchy of links to the current page or resource.">
  <Breadcrumbs />
</ExampleCard>

<ExampleCard
  url="Disclosure.html"
  title="Disclosure"
  description="A disclosure is a collapsible section of content.">
  <Disclosure />
</ExampleCard>

<ExampleCard
  url="Accordion.html"
  title="Accordion"
  description="An accordion is a grouping of related disclosures.">
  <Accordion />
</ExampleCard>

</section>

### Status

<section className={styles.cardGroup}>

<ExampleCard
  url="ProgressBar.html"
  title="ProgressBar"
  description="A progress bar shows progress of an operation over time with a linear representation.">
  <ProgressBar />
</ExampleCard>

<ExampleCard
  url="ProgressCircle.html"
  title="ProgressCircle"
  description="A progress circle shows progress of an operation over time with a circular representation.">
  <ProgressCircle />
</ExampleCard>

<ExampleCard
  url="Meter.html"
  title="Meter"
  description="A meter represents a quantity within a known range, or a fractional value.">
  <Meter />
</ExampleCard>

<ExampleCard
  url="LabeledValue.html"
  title="LabeledValue"
  description="A labeled value displays a non-editable value with a label, with locale-specific formatting.">
  <LabeledValue />
</ExampleCard>

<ExampleCard
  url="StatusLight.html"
  title="StatusLight"
  description="A status light displays the status or category of an entity.">
  <StatusLight />
</ExampleCard>

<ExampleCard
  url="Badge.html"
  title="Badge"
  description="A badge displays color-categorized metadata for an object.">
  <Badge />
</ExampleCard>

<ExampleCard
  url="Toast.html"
  title="Toast"
  description="A toast displays a temporary notification of an action, error, or other event.">
  <Toast />
</ExampleCard>

</section>

### Drag and drop
<section className={styles.cardGroup}>

<ExampleCard
  url="DropZone.html"
  title="DropZone"
  description="A drop zone is an area into which one or multiple objects can be dragged and dropped.">
  <DropZone />
</ExampleCard>

</section>